{% extends "base.html" %}

{% block content %}

    {% if user.is_authenticated %}

        <script type="text/javascript">
            //<script> verður að vera inni í einhverri block
            //Yfirskrifar width skilgreiningar í style.css
            $(document).ready(function(){
                $('#baseLeftNav').width("7%");
                $('#baseContent').width("60%");
                $('#baseRightNav').width("33%");
            });
        </script>


        <h3>{{ exam.name }}</h3>
        <form action="/answerExam/" method="POST">
            <input id="examid" type="hidden" name="examid" value="{{exam.id}}"/>
            {% for q in allAnswers %}
            <ul>
                <li>
                    <a name="q{{ q.qid }}">{{ q.qname }}</a>
                    <input type="hidden"     name="question{{ forloop.counter }}" value="{{ q.qid }}" />
                </li>
                    <ul>
                        {% for a in q.qanswers %}
                        <li><input id="r{{ q.qid }}" type="radio" name="radio_{{forloop.parentloop.counter}}" value="{{ forloop.counter }}" onclick="changeQuestionStatus( {{ forloop.parentloop.counter }} )" />
                            <input type="hidden" name="q{{ q.qid }}answer{{ a.id }}" value="{{a.id}}"/> {{ a.name }}
                        </li>
                        {% endfor %}

                    </ul>
            </ul>
            {% endfor %}
                        <input id="saveForm" name="saveForm" type="submit" value="Submit"/>
        </form>

    {% else %}
        <p>Welcome, new user. Please log in.</p>
    {% endif %}

{% endblock %}

{% block rightNav %}
    <section id="unansweredQuestionsList">
        {% for q in allAnswers %}
            <a class="unansweredQuestion" href="#q{{ q.qid }}"><p id="question{{ q.qid }}">{{ q.qname }}</p></a>
        {% endfor %}
    </section>
{% endblock %}